<template>
  <view class="createUser-container">
    <view class="inpInfoBox">
      <view class="text">
        <text>用户姓名：</text>
      </view>
      <u--input
        placeholder="请输入姓名"
        border="surround"
        v-model="form.userName"
        clearable
      ></u--input>
    </view>
    <view class="inpInfoBox">
      <view class="text">
        <text>用户昵称：</text>
      </view>
      <u--input
        placeholder="请输入昵称"
        border="surround"
        v-model="form.nickName"
        clearable
      ></u--input>
    </view>
    <view class="inpInfoBox">
      <view class="text">
        <text>电话号码：</text>
      </view>
      <u--input
        placeholder="请输入电话号码"
        border="surround"
        v-model="form.phonenumber"
        clearable
        type="number"
      ></u--input>
    </view>
    <view class="inpInfoBox" v-if="form.userId == undefined">
      <view class="text">
        <text>性别：</text>
      </view>
      <u-radio-group v-model="form.sex">
        <u-radio
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in sexRadioList"
          :key="index"
          :label="item.name"
          :name="item.name"
        >
        </u-radio>
      </u-radio-group>
    </view>
    <view class="inpInfoBox">
      <view class="text">
        <text>邮箱：</text>
      </view>
      <u--input
        placeholder="请输入常用邮箱"
        border="surround"
        v-model="form.email"
        clearable
        type=""
      ></u--input>
    </view>
    <view class="inpInfoBox" v-if="form.userId == undefined">
      <view class="text">
        <text>密码：</text>
      </view>
      <u--input
        placeholder="请输入密码"
        border="surround"
        v-model="form.password"
        clearable
        type="password"
      ></u--input>
    </view>
    <view class="inpInfoBox">
      <view class="text">
        <text>状态：</text>
      </view>
      <u-radio-group v-model="form.status">
        <u-radio
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in statusRadioList"
          :key="index"
          :label="item.name"
          :name="item.name"
          >{{ item.showName }}
        </u-radio>
      </u-radio-group>
    </view>
    <view class="inpInfoBox">
      <view class="text">
        <text>备注：</text>
      </view>
      <u--textarea v-model="form.remark" placeholder="请输入内容"></u--textarea>
    </view>
    <view class="btns">
      <view class="submitBotton">
        <u-button
          type="primary"
          text="确定"
          :plain="false"
          @click="submit"
        ></u-button>
      </view>
      <view class="cancelBotton">
        <u-button
          text="取消"
          type="error"
          :plain="false"
          @click="cancel"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { addUser, updateUser, getUser } from "@/api/system/user";
export default {
  // 获取标题,如果有查询则获取用户ID
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.title,
    });
    if (option.userId) {
      getUser(option.userId).then((res) => {
        this.form = res.data;
      });
    }
  },
  data() {
    return {
      form: {},
      // 单选表单数据
      sexRadioList: this.$store.getters.sexRadioList,
      // 单选状态
      statusRadioList: this.$store.getters.statusRadioList,
    };
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
    },
    submit() {
      console.log(this.form);
      if (this.form.userId != undefined) {
        updateUser(this.form).then((response) => {
          this.$modal.msgSuccess("修改成功");
          // this.open = false;
          this.$tab.redirectTo("/pages/work/userControl/index");
          this.reset();
        });
      } else {
        // this.reset()
        addUser(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          // this.open = false;
          this.$tab.redirectTo("/pages/work/userControl/index");
        });
      }
    },
    //取消按钮
    cancel() {
      this.$tab.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/yangLaoAppStyle.scss";
.createUser-container {
  padding: 4%;
  background-color: #fff;
  overflow: hidden;
}
</style>
